<template>
	<view class="bg-light" style="height: 100%;">
		<view class="flex pb-2" style="height: 50rpx;">
			<view v-for="(item, index) in tabs" :key="index" class="w-100 flex align-end justify-center" 
				style="cursor: pointer;height: 50rpx;" @click="changeTab(index)">
				<text :class="activeTab === index?'font-md font-weight-bold':'font'">{{ item.name }}</text>
			</view>
		</view>
		<scroll-view @scrolltolower="onReachScollBottom" scroll-y="true" class="w-100" :style="'height:calc(100vh - 70rpx) '">
			<view class="mx-2 py-2">
				<view @click="handle(item)" v-for="(item,index) in tableData " :key="index" class="bg-white flex flex-column py-2 rounded-lg mb-2">
					<view class="mx-2 flex justify-between align-center">
						<view class="flex align-center">
							<view class="font font-weight-bold">售后单号:{{item.Refund_SerialNumber}}</view>
							<uni-icons type="right" size="15" class="flex align-center"></uni-icons>
						</view>
						<view class="font">{{Row_Status(item.Row_Status)}}</view>
					</view>
					<!-- 商品 -->
					<view  class="flex justify-between mt-2 mx-2">
						<image :src="BASE_IMG+item.Picture_URL" style="width: 180rpx;height: 180rpx;"
							class="rounded-lg flex-shrink shadow mr-2">
						</image>
						<view class="flex justify-between w-100">
							<view>
								<view class="font font-weight-bold text-ellipsis">{{item.Article_Name}}</view>
								<view class="mt-1 font text-muted">{{item.Specifications_Name}}</view>
							</view>
							<view class="flex flex-column align-end">
								<view class="font-sm font-weight-bold">￥{{item.Sales_Unit_Price}}</view>
								<view class="mt-1 font-sm text-muted">
									×{{item.Quantity}}
								</view>
							</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="mx-2 flex justify-between align-center mt-2">
						<view class="font-sm text-danger">{{item.Row_Status.charAt(0)=='0'?'仅退款':'退货退款'}}</view>
						<text class="font-sm">共付款￥{{Amount(item)}}</text> 
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import money from "@/components/tool/money.vue";
	import Base64 from "base-64";
	import { generalPaginationQueryBySQLSerialNumber } from "@/api/generalBusiness.js";
	export default {
		data() {
			return {
				tabs: [{
					name:"全部",
					type:""
				}, {
					name:"仅退款",
					type:"0"
				}, {
					name:"退货退货",
					type:"1"
				}],
				form:{//查询地址
					PaginationNumber:1,
					RowAmount:10,
					SQLSerialNumber:'M_business_refund_detail',
					Condition:'',
					ExtensionCondition:''
				},
				total:0,
				activeTab:0,
				isReach:true,
				tableData:[],
			}
		},
		computed:{
			...mapState(['Open_ID','App_ID','BASE_IMG']),
			Row_Status(){
			    return function (str) {
			        switch (str.charAt(1)) {
			            case "0":
			                return "待处理";
			            case "1":
			                return "已退款";
			            case "2":
			                return "已拒绝";
			            case "3":
			                return "待上传物流单号";
			            case "4":
			                return "退货中";
			            case "5":
			                return "已退货待处理退款";
			            case "6":
			                return "退货完成拒绝退款";
			            default:
			                return ""
			        }
			    }
			},
			Amount() {
			    return function (row) {
			        let Sales_Point = row.Sales_Point == 0 ? '' : row.Sales_Point + '积分';
			        let i = row.Sales_Point != 0 && row.Reality_Amount != 0 ? '+' : ''
			        let Reality_Amount = row.Reality_Amount == 0 ? '' : row.Reality_Amount + '元'
			        return Sales_Point + i + Reality_Amount
			    }
			},
		},
		onLoad(options){
			this.getData(this.form)
		},
		methods: {
			onReachScollBottom(){
				if(this.isReach){//是否有剩余数据
					if (this.tableData.length < this.total) {
						this.form.PaginationNumber++;
						this.getData(this.form,true)
					} else {
						this.isReach = false;
					}
				}
			},
			async getData(form, onReach = false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					form.Condition = Base64.encode(`%${this.Open_ID}%,%${this.tabs[this.activeTab].type}%`)
					const res = await generalPaginationQueryBySQLSerialNumber(form);
					//判断是否重新开始查询
					if(!onReach) {
						this.form.PaginationNumber = 1
						this.tableData = [];
					}	
					this.tableData.push(...res.Rows);
					this.total = Number(res.TotalRows);
					uni.hideLoading();
					this.loading = false;
				}
			},
			changeTab(index){
				this.activeTab = index;
				this.isReach = true;
				this.getData(this.form);
			},
			handle(item){
				uni.navigateTo({
					url:'/pages/my/afterSalesDetail?Refund_SerialNumber='+item.Refund_SerialNumber
				})
			}
		}
	}
</script>

<style>

</style>
